<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>活动推送</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.activity-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.banner-section {
			margin-bottom: 30px;
		}
		.activity-banner {
			background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
			color: white;
			padding: 30px;
			border-radius: 12px;
			text-align: center;
			position: relative;
			overflow: hidden;
		}
		.banner-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="60" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
		}
		.banner-content {
			position: relative;
			z-index: 1;
		}
		.countdown {
			display: flex;
			justify-content: center;
			gap: 20px;
			margin-top: 20px;
		}
		.countdown-item {
			background: rgba(255, 255, 255, 0.2);
			padding: 10px 15px;
			border-radius: 8px;
			text-align: center;
		}
		.countdown-number {
			font-size: 24px;
			font-weight: bold;
			display: block;
		}
		.countdown-label {
			font-size: 12px;
			opacity: 0.9;
		}
		.activity-tabs {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 25px;
			overflow: hidden;
		}
		.tab-header {
			display: flex;
			background: #f8f9fa;
			border-bottom: 1px solid #e9ecef;
		}
		.tab-item {
			flex: 1;
			padding: 15px 20px;
			text-align: center;
			cursor: pointer;
			transition: all 0.3s;
			border-bottom: 3px solid transparent;
		}
		.tab-item.active {
			background: #fff;
			color: #409eff;
			border-bottom-color: #409eff;
		}
		.tab-item:hover:not(.active) {
			background: #e9ecef;
		}
		.tab-content {
			padding: 25px;
		}
		.activity-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
			gap: 20px;
		}
		.activity-card {
			border: 1px solid #e9ecef;
			border-radius: 12px;
			overflow: hidden;
			transition: transform 0.2s, box-shadow 0.2s;
			cursor: pointer;
			position: relative;
		}
		.activity-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
		}
		.activity-image {
			width: 100%;
			height: 200px;
			object-fit: cover;
		}
		.activity-overlay {
			position: absolute;
			top: 15px;
			left: 15px;
			right: 15px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
		.activity-type {
			background: #e74c3c;
			color: white;
			padding: 4px 12px;
			border-radius: 20px;
			font-size: 12px;
			font-weight: bold;
		}
		.activity-time {
			background: rgba(0, 0, 0, 0.7);
			color: white;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 11px;
		}
		.activity-info {
			padding: 20px;
		}
		.activity-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 8px;
		}
		.activity-desc {
			color: #666;
			font-size: 14px;
			margin-bottom: 15px;
			line-height: 1.5;
		}
		.activity-benefits {
			display: flex;
			gap: 8px;
			margin-bottom: 15px;
			flex-wrap: wrap;
		}
		.benefit-tag {
			background: #f0f9ff;
			color: #0369a1;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			border: 1px solid #bae6fd;
		}
		.activity-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 15px;
		}
		.participants {
			color: #999;
			font-size: 13px;
		}
		.flash-sale {
			background: linear-gradient(45deg, #ff4757, #ff6b7a);
		}
		.group-buy {
			background: linear-gradient(45deg, #5352ed, #7b68ee);
		}
		.discount {
			background: linear-gradient(45deg, #20bf6b, #26d0ce);
		}
		.limited-time {
			background: linear-gradient(45deg, #fa8231, #ffa726);
		}
		.progress-bar {
			background: #f1f3f4;
			border-radius: 10px;
			height: 8px;
			margin: 10px 0;
			overflow: hidden;
		}
		.progress-fill {
			height: 100%;
			background: linear-gradient(90deg, #ff6b6b, #ffa500);
			border-radius: 10px;
			transition: width 0.3s;
		}
		.empty-state {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="activity-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>活动推送</h2>
				<p>促销活动、限时折扣，优惠不错过</p>
			</div>

			<!-- 主活动横幅 -->
			<div class="banner-section">
				<div class="activity-banner">
					<div class="banner-bg"></div>
					<div class="banner-content">
						<h2>🎉 年终大促销 🎉</h2>
						<p style="font-size: 18px; margin: 10px 0;">全场生鲜最高5折，冷链配送免费！</p>
						<div class="countdown">
							<div class="countdown-item">
								<span class="countdown-number">{{countdown.days}}</span>
								<span class="countdown-label">天</span>
							</div>
							<div class="countdown-item">
								<span class="countdown-number">{{countdown.hours}}</span>
								<span class="countdown-label">时</span>
							</div>
							<div class="countdown-item">
								<span class="countdown-number">{{countdown.minutes}}</span>
								<span class="countdown-label">分</span>
							</div>
							<div class="countdown-item">
								<span class="countdown-number">{{countdown.seconds}}</span>
								<span class="countdown-label">秒</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 活动分类 -->
			<div class="activity-tabs">
				<div class="tab-header">
					<div 
						v-for="tab in tabs" 
						:key="tab.id"
						:class="['tab-item', {active: activeTab === tab.id}]"
						@click="switchTab(tab.id)">
						<i :class="tab.icon"></i>
						{{tab.name}}
					</div>
				</div>
				
				<div class="tab-content">
					<!-- 限时秒杀 -->
					<div v-if="activeTab === 'flash'" class="activity-grid">
						<div v-for="activity in flashSaleActivities" :key="activity.id" class="activity-card" @click="joinActivity(activity)">
							<div style="position: relative;">
								<img :src="activity.image" :alt="activity.title" class="activity-image">
								<div class="activity-overlay">
									<span class="activity-type flash-sale">{{activity.type}}</span>
									<span class="activity-time">{{activity.timeLeft}}</span>
								</div>
							</div>
							<div class="activity-info">
								<div class="activity-title">{{activity.title}}</div>
								<div class="activity-desc">{{activity.description}}</div>
								<div class="activity-benefits">
									<span v-for="benefit in activity.benefits" :key="benefit" class="benefit-tag">{{benefit}}</span>
								</div>
								<div class="progress-bar">
									<div class="progress-fill" :style="{width: activity.progress + '%'}"></div>
								</div>
								<div class="activity-footer">
									<span class="participants">{{activity.participants}}人已参与</span>
									<el-button size="small" type="danger">立即抢购</el-button>
								</div>
							</div>
						</div>
					</div>

					<!-- 团购活动 -->
					<div v-if="activeTab === 'group'" class="activity-grid">
						<div v-for="activity in groupBuyActivities" :key="activity.id" class="activity-card" @click="joinActivity(activity)">
							<div style="position: relative;">
								<img :src="activity.image" :alt="activity.title" class="activity-image">
								<div class="activity-overlay">
									<span class="activity-type group-buy">{{activity.type}}</span>
									<span class="activity-time">{{activity.timeLeft}}</span>
								</div>
							</div>
							<div class="activity-info">
								<div class="activity-title">{{activity.title}}</div>
								<div class="activity-desc">{{activity.description}}</div>
								<div class="activity-benefits">
									<span v-for="benefit in activity.benefits" :key="benefit" class="benefit-tag">{{benefit}}</span>
								</div>
								<div class="progress-bar">
									<div class="progress-fill" :style="{width: activity.progress + '%'}"></div>
								</div>
								<div class="activity-footer">
									<span class="participants">还差{{activity.needed}}人成团</span>
									<el-button size="small" type="primary">参与团购</el-button>
								</div>
							</div>
						</div>
					</div>

					<!-- 优惠券 -->
					<div v-if="activeTab === 'coupon'" class="activity-grid">
						<div v-for="activity in couponActivities" :key="activity.id" class="activity-card" @click="joinActivity(activity)">
							<div style="position: relative;">
								<img :src="activity.image" :alt="activity.title" class="activity-image">
								<div class="activity-overlay">
									<span class="activity-type discount">{{activity.type}}</span>
									<span class="activity-time">{{activity.timeLeft}}</span>
								</div>
							</div>
							<div class="activity-info">
								<div class="activity-title">{{activity.title}}</div>
								<div class="activity-desc">{{activity.description}}</div>
								<div class="activity-benefits">
									<span v-for="benefit in activity.benefits" :key="benefit" class="benefit-tag">{{benefit}}</span>
								</div>
								<div class="activity-footer">
									<span class="participants">已领取{{activity.claimed}}张</span>
									<el-button size="small" type="success">立即领取</el-button>
								</div>
							</div>
						</div>
					</div>

					<!-- 限时特价 -->
					<div v-if="activeTab === 'special'" class="activity-grid">
						<div v-for="activity in specialActivities" :key="activity.id" class="activity-card" @click="joinActivity(activity)">
							<div style="position: relative;">
								<img :src="activity.image" :alt="activity.title" class="activity-image">
								<div class="activity-overlay">
									<span class="activity-type limited-time">{{activity.type}}</span>
									<span class="activity-time">{{activity.timeLeft}}</span>
								</div>
							</div>
							<div class="activity-info">
								<div class="activity-title">{{activity.title}}</div>
								<div class="activity-desc">{{activity.description}}</div>
								<div class="activity-benefits">
									<span v-for="benefit in activity.benefits" :key="benefit" class="benefit-tag">{{benefit}}</span>
								</div>
								<div class="activity-footer">
									<span class="participants">{{activity.participants}}人已购买</span>
									<el-button size="small" type="warning">马上抢购</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					activeTab: 'flash',
					countdown: {
						days: 2,
						hours: 15,
						minutes: 42,
						seconds: 30
					},
					tabs: [
						{id: 'flash', name: '限时秒杀', icon: 'el-icon-lightning'},
						{id: 'group', name: '团购活动', icon: 'el-icon-user-solid'},
						{id: 'coupon', name: '优惠券', icon: 'el-icon-ticket'},
						{id: 'special', name: '限时特价', icon: 'el-icon-price-tag'}
					],
					flashSaleActivities: [
						{
							id: 1,
							title: '有机蔬菜秒杀专场',
							description: '精选有机蔬菜，限时5折抢购，数量有限先到先得！',
							type: '秒杀',
							timeLeft: '02:35:42',
							image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t011a1d8ca78d60bfa6.png',
							benefits: ['5折优惠', '包邮', '新鲜保证'],
							progress: 65,
							participants: 1280
						},
						{
							id: 2,
							title: '进口水果闪购',
							description: '新西兰奇异果、智利车厘子等进口水果特价来袭！',
							type: '闪购',
							timeLeft: '01:15:20',
							image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t0410d8931bad5ad64a.jpg',
							benefits: ['6折特价', '冷链直达', '品质保障'],
							progress: 80,
							participants: 856
						}
					],
					groupBuyActivities: [
						{
							id: 3,
							title: '澳洲牛肉团购',
							description: '10人成团享超低价，原切牛排品质保证',
							type: '团购',
							timeLeft: '23:45:10',
							image: 'https://via.placeholder.com/350x200/8BC34A/FFFFFF?text=澳洲牛肉团购',
							benefits: ['团购价', '原切品质', '真空包装'],
							progress: 70,
							needed: 3
						},
						{
							id: 4,
							title: '海鲜大礼包团购',
							description: '深海野生海鲜组合，5人成团立享优惠',
							type: '团购',
							timeLeft: '12:30:55',
							image: 'https://via.placeholder.com/350x200/03A9F4/FFFFFF?text=海鲜大礼包团购',
							benefits: ['野生海鲜', '组合优惠', '急冻保鲜'],
							progress: 40,
							needed: 2
						}
					],
					couponActivities: [
						{
							id: 5,
							title: '新用户专享券',
							description: '新用户注册立享50元无门槛优惠券',
							type: '优惠券',
							timeLeft: '永久有效',
							image: 'https://via.placeholder.com/350x200/E91E63/FFFFFF?text=新用户专享券',
							benefits: ['无门槛', '立即到账', '可叠加'],
							claimed: 2380
						},
						{
							id: 6,
							title: '满减券大放送',
							description: '满200减50，满500减150，多种面额任你选',
							type: '满减券',
							timeLeft: '7天内有效',
							image: 'https://via.placeholder.com/350x200/9C27B0/FFFFFF?text=满减券大放送',
							benefits: ['多种面额', '使用方便', '适用全场'],
							claimed: 5620
						}
					],
					specialActivities: [
						{
							id: 7,
							title: '帝王蟹限时特价',
							description: '阿拉斯加帝王蟹，原价398现价268，限量50只',
							type: '特价',
							timeLeft: '05:20:15',
							image: 'https://via.placeholder.com/350x200/FF5722/FFFFFF?text=帝王蟹特价',
							benefits: ['限量供应', '顶级品质', '冷链直达'],
							participants: 127
						},
						{
							id: 8,
							title: '黑松露限时优惠',
							description: '法国进口黑松露，美食家的最爱，限时8折',
							type: '限时优惠',
							timeLeft: '18:45:30',
							image: 'https://via.placeholder.com/350x200/795548/FFFFFF?text=黑松露优惠',
							benefits: ['进口品质', '稀有珍贵', '8折特价'],
							participants: 68
						}
					]
				}
			},
			methods: {
				switchTab(tabId) {
					this.activeTab = tabId;
				},
				joinActivity(activity) {
					this.$message.success(`参与活动：${activity.title}`);
				},
				updateCountdown() {
					// 模拟倒计时更新
					if (this.countdown.seconds > 0) {
						this.countdown.seconds--;
					} else if (this.countdown.minutes > 0) {
						this.countdown.minutes--;
						this.countdown.seconds = 59;
					} else if (this.countdown.hours > 0) {
						this.countdown.hours--;
						this.countdown.minutes = 59;
						this.countdown.seconds = 59;
					} else if (this.countdown.days > 0) {
						this.countdown.days--;
						this.countdown.hours = 23;
						this.countdown.minutes = 59;
						this.countdown.seconds = 59;
					}
				}
			},
			mounted() {
				// 启动倒计时
				setInterval(this.updateCountdown, 1000);
			}
		});
	</script>
</body>
</html>